<template>
  <div class="service_container">
    <div class="container">
      <h2 class="home_item_title"><span>服务，为选择保驾起航</span><b>SERVICE</b></h2>
      <ul class="service_list">
        <li class="service_item" v-for="(item,index) in List" :key="index">
          <p>
            <img :src="item.picUrl" alt="">
          </p>
          <h2>{{item.talentName}}</h2>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
  import DxHeader from 'common/header/header'
  import DxFooter from 'common/footer/footer'
  export default {
    name: 'Intro',
    props: {
      List: Array
    },
    components: {
      DxHeader,
      DxFooter
    },
    data () {
      return {}
    }
  }
</script>

<style scoped="scoped" lang="stylus">
  .service_container {
    background #f9f9f9
    padding :105px 0 115px;
  }

  .service_list {
    overflow hidden
    margin-top 50px;
  }

  .service_item {
    margin-bottom 20px;
    float left;
    width 271px;
    margin-right 12px;
    &:nth-child(4n) {
      margin-right 0
    }
    p {
      width 100%;
      height 350px;
      overflow hidden
      img{
        width 100%
        height auto;
        transition .3s all;
      }
        &:hover{
          img{
            transform:scale(1.1)
          }
        }
    }
    h2 {
      font-size 15px;
      color #333
      text-align center
      line-height 50px;
    }
  }
</style>
